<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="操作日志" v-model="visible" align-center width="800px" @close="handleClose">
    <vxe-grid ref="tableRef" v-bind="tableOptions" class="log-table" />
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { log } from '@/api/public'
const load = ref(false)
const visible = ref(false)
const tableRef = ref()
const params = ref({})
const tableOptions = reactive({
  height: 560,
  pagerConfig: { pageSize: 10 },
  columns: [
    { field: 'create_user', title: '操作人', width: 100 },
    { field: 'create_time', title: '操作时间', width: 160 },
    { field: 'log_type', title: '操作类型', width: 100 },
    { field: 'log_info', title: '操作说明', minWidth: 100 },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: 'data',
      total: 'total'
    },
    ajax: {
      query: ({ page }) => {
        return log({ ...page, ...params.value })
      }
    }
  }
})

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (obj) => {
  params.value = obj
  if (!load.value) {
    load.value = true
    await 1
  }
  visible.value = true
  await 1
  tableRef?.value.commitProxy('query')
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>
